<script setup>

import {ref} from "vue";
import {getCategoryFilterAPI, getSubCategoryAPI} from "@/apis/category.js";
import {useRoute} from "vue-router";
import GoodsItem from "@/views/Home/components/GoodsItem.vue";
const route = useRoute()
const filterData = ref({})
const goodsList = ref([])
const reqData = ref({
  categoryId: route.params.id,
  page:1,
  pageSize:20,
  sortField:'publishTime'
})
const disabled = ref(false)

const getFilterData = async () => {
  const res = await getCategoryFilterAPI(route.params.id)
  filterData.value = res.result
}
const getGoodsList = async () => {
  const res = await getSubCategoryAPI(reqData.value)
  goodsList.value = res.result.items
}

const tabChange = () => {
  reqData.value.page = 1
  disabled.value = false
  getGoodsList()
}

const load = async () => {
  reqData.value.page += 1
  const res = await getSubCategoryAPI(reqData.value)
  goodsList.value = [...goodsList.value,...res.result.items]
  if(res.result.items.length === 0) {
    disabled.value = true
  }
}

getFilterData()
getGoodsList()
</script>

<template>
<div class="container">
<!--  面包屑-->
  <div class="bread-container">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `/category/${filterData.parentId}`}">
        {{ filterData.parentName }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ filterData.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="sub-container">
    <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
      <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
      <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
      <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
    </el-tabs>
    <div class="body" 
      v-infinite-scroll="load" 
      :infinite-scroll-disabled="disabled"
    >
      <!--商品列表-->
      <GoodsItem v-for="goods in goodsList" :goods="goods" :key="goods.id"></GoodsItem>
    </div>
  </div>

</div>
</template>

<style scoped lang="scss">
  .bread-container {
    padding: 25px 0;
    color: #666;
  }

  .sub-container {
      padding: 20px 10px;
      background-color: #fff;

      .body {
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px;

        .goods-item {
          margin-right: 20px;
        }
      }
  }



  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

</style>